<div class="init-width">
    <div @click="hideUl" class="content-wrapper" id="device-wrapper">
        <div class="title-info">
            <h4 class="app-title">{{$t('nav.device')}}</h4>
            <div v-show="!isWifiConnect"  @click="showWifiFail" :class="!blueEnable ? 'right-75' : 'right-40'"
                 class="right-top ">
                <span class="right-icon">
                    <i class="icon-wifi icon-position"><i class="icon-cancel-circled"></i></i>
                </span>
            </div>
            <div v-show="!blueEnable"  @click="showBlueFail" class="right-top right-40">
                <span class="right-icon"><i class="icon-bluetooth icon-position">
                    <i class="icon-cancel-circled"></i></i></span>
            </div>
            <i @click.stop="showUl($event)" class="icon-plus right-top"></i>
            <ul v-show="flag" class="add-ul">
                <li @click.stop="showGuide($event)"><i class="icon-light"></i><span>{{$t('addDevice')}}</span></li>
                <li @click.stop="addGroup($event)"><i class="icon-groups"></i><span>{{$t('addGroup')}}</span></li>
            </ul>
        </div>

        <div class="input-info">
            <i class="icon-search"></i>
            <input v-model="searchName" type="search" class="form-control" :placeholder="$t('search')">
        </div>
        <div class="content-info flex-wrapper no-padding-bottom" id="device-list">
            <div class="overflow-touch">
                <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" ref="loadmore">
                    {{list}}
                    <div v-if="!showAdd" v-infinite-scroll="loadMoreList"
                         infinite-scroll-disabled="loadMoreing"
                         infinite-scroll-distance="30">
                        <div v-for="item in loadList" :id="item.mac" :key="item.mac"
                             v-longtap="{fn: showOperate, mac: item.mac}"
                             @click.self="operateItem(item)" class="item item-device">
                            <div @click.stop="operateItem(item)" :class="getBxColor(item.layer, item.tsf_time)"
                                 class="item-icon-circle">
                                <i :class="getIcon(item.tid)"
                                   :style="{'color': getColor(item.characteristics, item.tid)}"></i>
                                <span v-show="linkShow(item)"><i class="icon-link"></i></span>
                            </div>
                            <div @click.stop="operateItem(item)" class="item-name">
                                <span :class="{'cr-warning': getFlag(item.position)}">
                                    {{getPosition(item.position)}}
                                </span>
                                <span v-show="!showDesc(item.name)">{{item.mac}}</span>
                                <span v-show="showDesc(item.name)"  :class="{'desc': showDesc(item.position)}">
                                    {{item.name}}
                                    <span v-show="showDesc(item.position)">({{item.version}})&nbsp;&nbsp;&nbsp;
                                        <img v-show="item.rssi <= 0" class="item-img" :src="getRssiIcon(item.rssi)"/>
                                    </span>

                                </span>
                                <span class="desc" v-show="!showDesc(item.position)">
                                    {{item.version}}&nbsp;&nbsp;&nbsp;
                                    <img v-show="item.rssi <= 0" class="item-img" :src="getRssiIcon(item.rssi)"/>
                                </span>
                            </div>
                            <div class="item-power">
                                <div v-show="isLigth(item.tid)" class="switch-wrapper">
                                    <span :class="{'active': !getStatus(item.characteristics)}"
                                          @click="close(item.mac, 0, $event)">OFF</span>
                                    <span :class="{'active': getStatus(item.characteristics)}"
                                          @click="close(item.mac, 1, $event)">ON</span>
                                </div>
                                <div v-show="isSensor(item.tid, item.characteristics)" class="sensor-wrapper">
                                    <span class="desc">temp: {{getSensorTemperature(item.characteristics)}}℃</span>
                                    <span class="desc">humi: {{getSensorHumidity(item.characteristics)}}%</span>
                                    <span class="desc">lumi: {{getSensorLuminance(item.characteristics)}}cd</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-if="showAdd" class="add-wrapper">
                        <div class="add-icon-wrapper">
                            <img class="add-image" src="images/no_light.png"/>
                        </div>
                        <div class="add-title">{{$t('noAddDeviceDesc')}}</div>
                        <div class="add-desc">{{$t('listDesc')}}</div>
                        <div  class="add-plus" @click="showGuide($event)">
                            {{$t('addDevice')}}
                        </div>
<!--                        <div class="add-desc">{{$t('videoDesc')}}&nbsp;<span @click="showVideo" class="blue">-->
<!--                            {{$t('clickVideoDesc')}}</span></div>-->
                    </div>
                    <div slot="top" class="mint-loadmore-top">
                        <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
                        <div v-show="topStatus === 'loading'" id="loader-wrapper-small">
                            <div class="loader loader-small"></div>
                            <div class="loader-section section-left"></div>
                            <div class="loader-section section-right"></div>
                        </div>
                    </div>
                </mt-loadmore>
            </div>
        </div>
        <v-load :loadDesc="loadDesc" ref="load"></v-load>
        <v-footer :current="device"></v-footer>
    </div>
    <transition name="ups">
        <div v-show="infoShow" class="operate-wrapper">
            <div @click="hideOperate" class="mask"></div>
            <div class="operate-info">
                <ul v-if="deviceInfo">
                    <li class="name">
                        <span class="title"><i :style="{'color': getColor(deviceInfo.characteristics, deviceInfo.tid)}"
                                               :class="getIcon(deviceInfo.tid)"></i>{{deviceInfo.name}}</span>
                        <div v-show="isLigth(deviceInfo.tid)" class="desc">
                            <div class="switch-wrapper">
                                <span :class="{'active': !getStatus(deviceInfo.characteristics)}"
                                      @click="operateClose(deviceInfo.mac, 0, $event)">OFF</span>
                                <span :class="{'active': getStatus(deviceInfo.characteristics)}"
                                      @click="operateClose(deviceInfo.mac, 1, $event)">ON</span>
                            </div>
                        </div>
                    </li>
                    <li @click="editName"><span>{{$t('editName')}}</span></li>
                    <li @click="delDevice"><span class="icon-orange">{{$t('reconfigure')}}</span></li>
                    <li @click="showAbout"><span>{{$t('aboutDevice')}}</span></li>
                    <li @click="showOta"><span>{{$t('otaUpdate')}}</span></li>
                    <li @click="showOtaBack"><span>{{$t('versionRollback')}}</span></li>
                    <li @click="showPair"><span>{{$t('location')}}</span></li>
                    <li @click="showAuto"><span>{{$t('association')}}</span></li>
                    <li @click="showConfig" v-show="isShowConfig(deviceInfo.tid)"><span>配置</span></li>
                    <!--<li @click="showSendIp"><span>{{$t('setIP')}}</span></li>-->
                    <li @click="showCommand"><span>{{$t('command')}}</span></li>
                    <li @click="hideOperate" class="margin-top-15 no-border"><span>{{$t('cancelBtn')}}</span></li>
                </ul>
            </div>

        </div>
    </transition>
    <v-resetDevice v-on:resetShow="onBackIndex" ref="device"></v-resetDevice>
    <v-joinDevice v-on:joinShow="onBackIndex" ref="join"></v-joinDevice>
    <v-addGroup v-on:addGroupShow="onBackIndex"
                :name="groupName" :addGroupId="addGroupId" ref="group"></v-addGroup>
    <v-operateDevice v-on:operateShow="onBackIndex" :isDevice="isDevice" :isRoom="false"
                     :colorId="colorId" :temperatureId="temperatureId"
                     ref="operate"></v-operateDevice>
    <v-aboutDevice v-on:aboutShow="onBackIndex" :deviceInfo="deviceInfo"
                   v-if="deviceInfo" ref="aboutDevice"></v-aboutDevice>
    <v-otaInfo v-on:otaShow="onBackIndex" :otaId="otaDeviceId" :macs="otaMacs"
               v-if="deviceInfo" ref="ota"></v-otaInfo>
    <v-automation v-on:autoShow="onBackIndex" :deviceInfo="deviceInfo" :autoId="autoId"
                  v-if="deviceInfo" ref="auto"></v-automation>
    <v-scanDevice v-on:scanDeviceShow="onBackIndex" ref="scanDevice"></v-scanDevice>
    <v-attr v-on:attrShow="onBackIndex" ref="attr"></v-attr>
    <v-remind ref="remind"></v-remind>
    <v-setDevicePair v-on:setDevicePairShow="onBackIndex" ref="setDevicePair"></v-setDevicePair>
    <v-command v-on:commandShow="onBackIndex" :commandMacs="commandMacs" ref="command"></v-command>
    <v-sendIP v-on:sendIPShow="onBackIndex" :commandMacs="commandMacs" ref="sendIP"></v-sendIP>
    <v-blueFail v-on:blueFailShow="onBackIndex" ref="blueFail"></v-blueFail>
    <v-wifiFail v-on:wifiFailShow="onBackIndex" ref="wifiFail"></v-wifiFail>
    <v-config v-on:configShow="onBackIndex" :deviceInfo="deviceInfo" v-if="deviceInfo" ref="config"></v-config>
    <v-newVersion v-on:newVersionShow="onBackIndex" ref="newVersion"></v-newVersion>
    <v-guide v-on:guideShow="onBackIndex" ref="guide"></v-guide>
    <v-car v-on:carShow="onBackIndex" ref="car"></v-car>
</div>
